/* 组件挂在完毕后计算手指触摸View盒子的范围 */

/* @1. 当show=true时，控制面板下面被触摸不可以执行触摸事件及双击单击事件等
 * @2. 当show=true时，只需要减去底部的值，就好了
 * @3. 当show=false时，就是屏幕的高度
 */
export default {
	data() {
		return {
			TouchView_Width: 0, //手指触摸View盒子面板的宽度
			TouchView_Height: 0, //手指触摸View盒子面板的高度
			TouchView_Top: 0, //距离顶部的距离
			TouchView_Bottom: 0, //距离底部的距离
			TouchView_left: 0, //距离左边的距离
		}
	},
	watch:{
		show:{
			handler(newShow,oldShow){
				if (newShow==true&&this.isFullScreenChange==true){
					// 进入全屏下并且show=true，修改手指触摸View盒子的高度
					let Bottom = Number(75+55+10)//距离来源于控制面板bottom的高度75和top的高度45加内边距10,5是后加的保护区
					this.TouchView_Height = this.FullscreenHeight-Bottom+'px'
					let RightLeft = Number(30+30+45+45+20)//30=左右内边距，45=左右图标按钮，20=保护区
					this.TouchView_Width = this.FullscreenWidth-RightLeft+'px'
					this.TouchView_Top = Number(45+10)+'px' // 导航高45px top外边距10px
					this.TouchView_left = Number(30+45)+'px' // 距离左边30 按钮宽度45px
					//
				}else if (newShow==false&&this.isFullScreenChange==true){
					// 进入全屏下并且show=false，修改手指触摸View盒子的高度
					this.TouchView_Height = this.FullscreenHeight+'px'
					this.TouchView_Width = this.FullscreenWidth+'px'
					this.TouchView_Top = 0+'px'
					this.TouchView_left = 0+'px'
					//
				}else if (newShow==true&&this.isFullScreenChange==false){
					// 退出全屏下并且show=true，修改手指触摸View盒子的高度
					// 由于退出全屏时，是rpx单位，所以×2
					let Bottom = Number(45+45+5)*2//距离来源于控制面板bottom的高度45和top的高度45,5是后加的保护区
					this.TouchView_Height = this.VideoHeigth-Bottom+'rpx'
					this.TouchView_Width = this.VideoWidth+'rpx'
					this.TouchView_Top = 45+'px'
					this.TouchView_left = 0+'px'
					//
				}else if (newShow==false&&this.isFullScreenChange==false){
					// 退出全屏下并且show=false，修改手指触摸View盒子的高度
					this.TouchView_Height = this.VideoHeigth+'rpx'
					this.TouchView_Width = this.VideoWidth+'rpx'
					this.TouchView_Top = 0+'px'
					this.TouchView_left = 0+'px'
				}
			},
			immediate: true,//普通监听（可监听到第一次绑定的变化）
		},
		/* @1. 当退出和进入全屏时，还需要重新计算下
		 * @2. 因为不计算的话，比如全屏下的高度退出时，数据还是全屏的高度
		 * @3. 所以就算退出全屏后show=true,高度还是全屏下计算的，除非在点一次屏幕，这样不好
		 * @4. 所以需要监听退出全屏和进入全屏后，重新计算
		 */
		isFullScreenChange:{
			handler(newChange,oldChange){
				//console.log('newChange')
				//console.log(newChange)
				if (newChange==true&&this.show==true){
					// 进入全屏下并且show=true，修改手指触摸View盒子的高度
					let Bottom = Number(75+55+10)//距离来源于控制面板bottom的高度75和top的高度45加内边距10,5是后加的保护区
					this.TouchView_Height = this.FullscreenHeight-Bottom+'px'
					let RightLeft = Number(30+30+45+45+20)//30=左右内边距，45=左右图标按钮，20=保护区
					this.TouchView_Width = this.FullscreenWidth-RightLeft+'px'
					this.TouchView_Top = Number(45+10)+'px' // 导航高45px top外边距10px
					this.TouchView_left = Number(30+45)+'px' // 距离左边30 按钮宽度45px
					
					/* 3.3.4版本已不需要此处事件 */
					// 执行控制面板动画，让其隐藏，可修复bug（ps：频繁操作切换进入退出全屏，会出现官方的进度条回到0位置，点击任意地方就是0，拖动也是0的问题）
					//this.setTimeisShowComm()
					//
					

				}else if (newChange==true&&this.show==false){
					// 进入全屏下并且show=false，修改手指触摸View盒子的高度
					this.TouchView_Height = this.FullscreenHeight+'px'
					this.TouchView_Width = this.FullscreenWidth+'px'
					this.TouchView_Top = 0+'px'
					this.TouchView_left = 0+'px'
					//
				}else if (newChange==false&&this.show==true){
					// 退出全屏下并且show=true，修改手指触摸View盒子的高度
					// 由于退出全屏时，是rpx单位，所以×2
					let Bottom = Number(45+45+5)*2//距离来源于控制面板bottom的高度45和top的高度45,5是后加的保护区
					this.TouchView_Height = this.VideoHeigth-Bottom+'rpx'
					this.TouchView_Width = this.VideoWidth+'rpx'
					this.TouchView_Top = 45+'px'
					this.TouchView_left = 0+'px'
					// 先隐藏，成功后再显示
					// 执行控制面板动画，让其隐藏，可修复bug（ps：频繁操作切换进入退出全屏，会出现官方的进度条回到0位置，点击任意地方就是0，拖动也是0的问题）
					// this.setTimeisShowComm().then(res=>{
					// 	console.log('隐藏成功')
					// 	// 延时400毫秒执行
					// 	setTimeout(()=>{
					// 		// 显示控制面板
					// 		this.isShowCommFullScreen()
					// 		// 这里最低延时400毫秒，400更加好一点
					// 	},450)
					// })
					
					/* 新版 2021-1102-0314 */
					this.isShowCommFullScreen()
					//
				}else if (newChange==false&&this.show==false){
					// 退出全屏下并且show=false，修改手指触摸View盒子的高度
					this.TouchView_Height = this.VideoHeigth+'rpx'
					this.TouchView_Width = this.VideoWidth+'rpx'
					this.TouchView_Top = 0+'px'
					this.TouchView_left = 0+'px'
				}
			},
			immediate: true,//普通监听（可监听到第一次绑定的变化）
		}
	},
	methods:{
		// 此方法是用于修复bug的，看下面注释，更新时间：2021-1027-23:41
		setTimeisShowComm(){
			return new Promise((resolve,reject)=>{
				// 执行控制面板动画，让其隐藏，可修复bug（ps：频繁操作切换进入退出全屏，会出现官方的进度条回到0位置，点击任意地方就是0，拖动也是0的问题）
				setTimeout(()=>{
					// 关闭控制面板
					this.isShowCommFullScreen()
					// 400毫秒是动画的时间，刚好卡在400，不会看到控制面板显示再隐藏的问题，并且不影响下次点击显示
					resolve(true)
					// 450好一点 2021-1102-0308
				},450)
			})
		},
	}
}